<template>
	<view>
		<u-navbar title="更多评论" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#FFFFFF"
			:titleStyle="titleStyle">

		</u-navbar>
		<scroll-view style="height: 100vh;" :scroll-y="true" @scroll="onScroll" :scroll-with-animation="true"
			:refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onDataList"
			refresher-default-style="white" @scrolltolower="scrolltolower">

			<view v-if="commentsBeans.length>0" class="commentsV">
				<view class="commentsListV" v-for="(item,key) in commentsBeans" :key="key">
					<view class="commentsItemV">
						<image class="avatarIv" :src="item.avatar"></image>
						<view class="centerVcomments">
							<view class="nameTvcomments">{{item.nickname}}</view>
							<view class="timeTvcomments">{{item.time}}</view>
						</view>
						<image @click="onZanClick(item)" v-if="item.is_zan==0" class="zanIv" src="../../static/public/zan.svg"></image>
						<image @click="onZanClick(item)" v-if="item.is_zan==1" class="zanIv" src="../../static/public/zan_to.svg"></image>

					</view>
					<view class="commentsItemTxt">{{item.content}}</view>
					<view class="commentsItemLine"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				mPage: 1,
				triggered: false,
				scrollTop: 0,
				id: "",
				commentsBeans: []
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getCommentList()
		},
		methods: {
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getCommentList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getCommentList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getCommentList() { //获取评论
				this.$api.getTeachCommentList({
					page: this.mPage,
					type: "combo",
					item_id: this.id
				}).then((res) => {
					if (this.mPage == 1) {
						this.commentsBeans = res.list;
					} else {
						this.commentsBeans.push(...res.list)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onZanClick(item) {  //点赞
				uni.showLoading({
					title: '请稍后'
				})
				this.$api.setZan({
					comment_id: item.id
				}).then((res) => {
					uni.hideLoading();
					this.getCommentList();
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
		}
	}
</script>

<style lang="scss">
	.commentsV {
		background: #1F1F1F;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-top: 30rpx;

		.commentsTitleTv {
			font-size: 36rpx;
			color: #E8E8E8;
		}

		.commentsListV {
			display: flex;
			flex-direction: column;
			margin-top: 25rpx;

			.commentsItemV {
				display: flex;

				.avatarIv {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #CEF743;
				}

				.centerVcomments {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;

					.nameTvcomments {
						font-size: 28rpx;
						color: #E8E8E8;
					}

					.timeTvcomments {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #858585;
					}
				}

				.zanIv {
					width: 40rpx;
					height: 40rpx;
					min-width: 40rpx;
				}
			}

			.commentsItemTxt {
				font-size: 28rpx;
				color: #E8E8E8;
				margin-top: 22rpx;
			}

			.commentsItemLine {
				height: 1rpx;
				background: #383838;
				margin-top: 30rpx;
			}
		}

		.commentsMoreTv {
			width: 100%;
			height: 60rpx;
			background: #383838;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #CEF743;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
